<template>
  <div class="bg_friend">
    <div class="public_time">{{ DFormat(new Date(), "yyyy-MM-dd hh:mm") }}</div>

    <div class="user_con" v-for="item in props.FriendDetail" :key="item.id">
      <img class="user_avator" src="/static/user.png" alt="" />
      <div class="friend_main">
        <div class="user_name">{{ item.user_name || "张三" }}</div>
        <!--欢迎语-->
        <template v-if="item.type == 0">
          <div class="welcomeWords">{{ item.content }}</div>
        </template>
        <!-- 图片 -->
        <template v-if="item.type == 1">
          <el-image class="send_image" :src="item.absolute_url" alt="" fit="cover">
            <template #error>
              <el-image class="send_image" src="/static/file/pic.png" alt=""></el-image>
            </template>
          </el-image>
        </template>
        <!-- 音频 -->
        <template v-else-if="item.type == 4">
          <div class="user_file">
            <div class="user_file_main">
              <div class="user_file_desc">{{ item.title }}</div>
              <el-image
                :src="item.cur_icon"
                alt=""
                class="user_file_icon"
                fit="cover"
              ></el-image>
            </div>
            <div class="user_file_size">
              {{ item.file_size ? (item.file_size / 1024 / 1024).toFixed(2) + " M" : "" }}
            </div>
          </div>
        </template>
        <!-- 视频 -->
        <template v-else-if="item.type == 2">
          <div class="video_list">
            <el-image class="video_image" :src="item.thumbnail_url" alt="" fit="cover">
              <template #error>
                <el-image
                  class="video_image"
                  src="/static/file/mov.png"
                  alt=""
                ></el-image>
              </template>
            </el-image>
            <el-image
              class="video_play"
              src="/static/play.png"
              alt=""
              fit="cover"
            ></el-image>
          </div>
        </template>
        <!-- 文件 -->
        <template v-else-if="item.type == 5">
          <div class="user_file">
            <div class="user_file_main">
              <div class="user_file_desc">{{ item.title }}</div>
              <el-image
                :src="getSuffixIcon(item.name)"
                alt=""
                class="user_file_icon"
                fit="cover"
              ></el-image>
            </div>
            <!-- <div class="user_file_size">
              {{ (item?.mediaFileInfo.size / 1024 / 1024).toFixed(2) }}M
            </div> -->
          </div>
        </template>
        <!-- 链接 -->
        <template v-if="item.type == 3">
          <div class="user_link">
            <div class="user_link_tit">{{ item.title }}</div>
            <div class="user_link_main m_t">
              <div class="user_link_desc">{{ item.content }}</div>
              <el-image
                :src="item.cover_image_url"
                alt=""
                class="user_link_icon"
                fit="cover"
              >
                <template #error>
                  <el-image
                    class="user_link_icon"
                    src="/static/file/pic.png"
                    alt=""
                  ></el-image>
                </template>
              </el-image>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";

import { DFormat, getSuffixIcon } from "@/utils/utils";
const props = defineProps(["FriendDetail"]);

console.log(props.FriendDetail);

const list = reactive([]);
</script>

<style scoped lang="scss">
$num: 2;
@mixin ellips($num) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  line-clamp: $num;
  -webkit-box-orient: vertical;
}
.bg_friend {
  // width: 100%;

  .public_title {
    font-size: 11px;
    margin-top: -10px;
    text-align: center;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #33302d;
  }
  .public_time {
    text-align: center;
    font-size: 11px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #969696;
  }
  .user_con {
    margin-top: 10px;
    display: flex;
    .user_avator {
      width: 22px;
      height: 22px;
      margin-right: 4px;
    }
    .friend_main {
      flex: 1;
      .user_name {
        font-size: 12px;
        margin-top: -8px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #969696;
        transform: scale(0.6);
        transform-origin: left top;
        margin-bottom: 4px;
      }
      .welcomeWords {
        position: relative;
        margin-top: -23px;
        font-size: 12px;
        color: #969696;
        line-height: 15px;
        transform: scale(0.6);
        transform-origin: left top;
        width: 160px;
        box-sizing: border-box;
        word-break: break-all;
        height: 67px;
        overflow: hidden;
        padding: 5px 10px;
        background-color: #fff;
        border-radius: 5px;
        @include ellips(4);
        &::after {
          content: "";
          position: absolute;
          left: -5px;
          top: 10px;
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-right: 8px solid #fff;
          border-bottom: 5px solid transparent;
        }
      }
      .send_image {
        width: 68px;
        height: 46px;
        margin-top: -23px;
      }
      .video_list {
        position: relative;
        width: 80px;
        height: 55px;
        margin-top: -23px;

        .video_image {
          width: 100%;
          height: 100%;
        }
        .video_play {
          width: 15px;
          height: 15px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .user_link {
        // margin-left: 5px;
        margin-top: -23px;
        position: relative;
        width: 151px;
        height: 65px;
        box-sizing: border-box;
        padding: 5px 10px;
        border-radius: 5px;
        background: #ffffff;
        &::after {
          content: "";
          position: absolute;
          left: -5px;
          top: 10px;
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-right: 8px solid #fff;
          border-bottom: 5px solid transparent;
        }
        .user_link_tit {
          width: 100%;
          font-size: 12px;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #000000;
          transform: scale(0.83);
          transform-origin: left top;
          @include ellips(2);
        }
        .user_link_main {
          margin-top: 4px;
          display: flex;
          .user_link_desc {
            width: 110px;
            font-size: 12px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #969696;
            transform: scale(0.6);
            transform-origin: left top;
            margin-top: 2px;
            @include ellips(3);
          }
          .user_link_icon {
            width: 22px;
            height: 22px;
          }
        }
        .m_t {
          margin-top: -45px;
        }
      }
      .user_file {
        position: relative;
        // margin-left: 5px;
        margin-top: -23px;
        width: 150px;
        height: 48px;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 3px;
        background: #ffffff;
        &::after {
          content: "";
          position: absolute;
          left: -5px;
          top: 6px;
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-right: 10px solid #fff;
          border-bottom: 5px solid transparent;
        }
        .user_file_main {
          display: flex;
          .user_file_desc {
            width: 105px;
            font-size: 12px;
            transform: scale(0.83);
            transform-origin: left top;
            margin-bottom: 2px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #000000;
            @include ellips(2);
          }
          .user_file_icon {
            width: 30px;
            height: 30px;
          }
        }
        .user_file_size {
          // margin-top: 2px;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #969696;
          font-size: 12px;
          transform: scale(0.6);
          transform-origin: left top;
        }
      }
    }
  }
}
</style>
